<template>
	<div class="login"> 
       <div class="login-img">
       	<img src="../../../static/img/loginImg.png" alt="" />
       </div>
       <div class="logining">
       	   <el-tabs v-model="activeName" @tab-click="handleClick" class="mine-choose-tab " :stretch='stretch'>
	        <el-tab-pane  label="登录" label.ForeColor = vbRed name="first" class="changecolor">
	          <div class="logins">
	          	<input v-model="photoNum" type="text" placeholder="请输入手机号" class="box1" />
	          	<i class="iconfont box2" >&#xe60c;</i>
	          </div>
	          <div class="logins">
	          	<input v-model="Lpassword" type="password" placeholder="请输入密码" class="box1" />
	          	<i class="iconfont box2" > &#xe626;</i>
	          </div>
	           <div class="btn" @click="loginHandler">登 录</div>
	          <div class="thirdparty">
	          	   <div class="thirdparty-text">
	          	   	<span></span>
	          	   	 <i>其他方式登录</i>
	          	   	<span></span>
	          	   </div>
	          </div>
	          <div class="icon">
	          	 <i class="iconfont">&#xe73e;</i>
	          	 <i class="iconfont">&#xe631;</i>
	          	 <i class="iconfont">&#xe608;</i>
	          </div>
	        </el-tab-pane>  
	        <el-tab-pane  label="注册" name="second" class="changecolor">
	            <div class="register">
		          	<input v-model="Rregister" type="text" placeholder="请输入用户名" class="box3" />
		          	<i class="iconfont box4" >&#xe60c;</i>
	            </div>
	            <div class="register">
		          	<input v-model="Rpassword" type="password" placeholder="请输入密码" class="box3" />
		          	<i class="iconfont box4" > &#xe626;</i>

	            </div>
	            <div class="register">
		          	<input v-model="Rrepassword" type="password" placeholder="请再次输入密码" class="box3" />
		          	<i class="iconfont box4" > &#xe626;</i>
	            </div>
	            <div class="btn" @click="registerHandler">注 册</div>
	            <div class="thirdparty">
	          	   <div class="thirdparty-text">
	          	   	<span></span>
	          	   	 <i>其他方式登录</i>
	          	   	<span></span>
	          	   </div>
	          </div>
	          <div class="icon">
	          	 <i class="iconfont">&#xe73e;</i>
	          	 <i class="iconfont">&#xe631;</i>
	          	 <i class="iconfont">&#xe608;</i>
	          </div>
	        </el-tab-pane>
      </el-tabs>
       </div>
	</div>
	
</template>

<script>
	import "../../../static/icon/iconfont.css"
export default {
	name:"Login",
	data(){
		return {
           stretch:true,
           activeName: 'first',
           Rregister:"",
           Rrepassword:"",
           Rpassword:"",
           Lpassword:"",
           photoNum:""
        }   
	},
	methods:{
      handleClick(tab,event){
          
      },
      // 注册
      registerHandler(event){
      	console.log(this.Rregister,this.Rpassword,this.Rrepassword)
      	if(!this.Rregister||!this.Rpassword||!this.Rrepassword){
	            // this.$message('这是一条消息提示');
	           alert('内容不能为空');
           }else if(this.Rpassword!==this.Rrepassword){
                alert('俩次密码不一致');
           }else{
           	 var url=this.HOST+"/use"
           	  // console.log(url)
           	this.$axios.post(url,{
              username:this.Rregister
            })
            .then(res=>{
            	console.log(this.Rregister,this.Rpassword)
            	console.log(res.data)
            	if(res.data.length<=0){
                    var url=this.HOST+"/register"
           	  		// console.log(url)
		           	this.$axios.post(url,{
		              username:this.Rregister,
		              password:this.Rpassword
		            })
		            .then(res=>{
		            	console.log(res.data)
                        if(res.data.msg=="success"){
                        	alert("注册成功")
                        	// this.$router.push("/login")
                             location.reload()

                        }
                        
		            })
		            .catch(error=>{
                       console.log(error)
		            })
            	}else{
            		alert('用户名已存在');
            		this.Rpassword="";
					this.Rrepassword="";
					this.Rregister="";
            	}
            })
            .catch(error=>{
            	console.log(error)
                })
           }
      },
      // 登录
      loginHandler(event){
          console.log(this.photoNum,this.Lpassword)
        // event.preventDefault();
           if(!this.photoNum||!this.Lpassword){
	            // this.$message('这是一条消息提示');
	           alert('内容不能为空');
           }
           if(this.photoNum||this.Lpassword){
           	var url=this.HOST+"/login"
           	console.log(url)
           	this.$axios.post(url,{
              username:this.photoNum,
              password:this.Lpassword
            })
            .then(res=>{
            	console.log(res.data[0].username)
            	if(!res.data.length){
            		alert("密码或用户名错误")
            	}else{
            		var expires = new Date(new Date().getTime() + 1000*1000).toGMTString();
					document.cookie = 'username='+res.data[0].username+';expires='+expires;
            		this.$router.push("/library")
                    // this.$router.push({name:'Library'})
            	}
                
            })
            .catch(error=>{
            	console.log(error)
            })
           }
        this.photoNum=""; 
        this.Lpassword=""; 
      }

    }

}	

</script>
80 490
<style lang="less">
.login{
	width: 750/100rem;
	height:1280/100rem;
	background:url("../../../static/img/login_02.png") no-repeat;
	background-color: rgba(128,0,128,.3);
}
.login-img{
	width: 100%;
	height: 460/100rem;
	img{
		width: 100%;
		height:100%;
	}
}	
.logining{
	width: 506/100rem;
	margin: 20/100rem auto 0;
}
.changecolor{
	color:#fff;
}

//tabs颜色设置

.logining .el-tabs__item{
	color:#ccc ;
}
.logining .el-tabs__item.is-active {
	color:#fff ;
}
// 登录
.logins{
	width: 100%;
	height: 105/100rem;
	margin-bottom: 20/100rem;
	position:relative; 
}
.logins>.box1{
	width: 100%;
	height:100%;
	text-align: center;
	position:absolute;
	left: 0;
	top:0; 
	color:#FFF;
	font-size: 40/100rem;
}
.box2{
	position:absolute;
	left: 20/100rem;
	top:30/100rem; 
	font-size: 40/100rem;
}
.btn{
	width: 490/100rem;
	height:80/100rem;
	line-height:80/100rem;
	font-size: 40/100rem;
	background-color: #b435ee;
	border-radius: 20/100rem;
	text-align:center;
}
.thirdparty-text{
	width:100%;
	height:180/100rem;
	line-height:180/100rem;
	display: flex;
	i{
		font-size: 20/100rem;
		margin-left:20/100rem;
		margin-right:20/100rem;
	}
}
.thirdparty-text span{
	display: inline-block;
    width:150/100rem;
    height:4/100rem;
    margin-top: 88/100rem;
    background-color: #FFF;
}
.icon{
	width: 100%;
	height:230/100rem;
	display: flex;
	i{
		display: inline-block;
		flex-grow:1;
		text-align: center;
		font-size: 0.6rem;
	}
}
// 注册
.register{
	width: 100%;
	height: 70/100rem;
	margin-bottom: 20/100rem;
	position:relative; 
}
.register>.box3{
	width: 100%;
	height:100%;
	text-align: center;
	position:absolute;
	left: 0;
	top:0; 
	color:#FFF;
	font-size: 40/100rem;
}
.box4{
	position:absolute;
	left: 20/100rem;
	top:16/100rem;
	font-size: 40/100rem;
}
.btn{
	width: 490/100rem;
	height:80/100rem;
	line-height:80/100rem;
	font-size: 40/100rem;
	background-color: #b435ee;
	border-radius: 20/100rem;
	text-align:center;
}
.thirdparty-text{
	width:100%;
	height:180/100rem;
	line-height:180/100rem;
	display: flex;
	i{
		font-size: 20/100rem;
		margin-left:20/100rem;
		margin-right:20/100rem;
	}
}
.thirdparty-text span{
	display: inline-block;
    width:150/100rem;
    height:4/100rem;
    margin-top: 88/100rem;
    background-color: #FFF;
}
.icon{
	width: 100%;
	height:230/100rem;
	display: flex;
	i{
		display: inline-block;
		flex-grow:1;
		text-align: center;
		font-size: 0.6rem;
	}
}
</style>
